
import React, { forwardRef, useContext, useEffect, useState, useCallback } from 'react'
import { useSelector, useDispatch } from "react-redux";
import { Radio, Input, Row, Col, Button } from 'antd';
import notify from "@utils/tip";
import { DISTRIBUTE_SCENES } from '@constants/ActivityListMap'
import CustomizeModal, { CustomizeModalContext, CustomizeModalButton } from "@common/presentational/CustomizeModal";
import { setCouponDistribution  } from '@sagas/marketing'

const DistributionContent = props => {
    const { hide, params } = useContext(CustomizeModalContext)
    const { callback } = props
    const { id } = params
    const [cnt, setCnt] = useState()
    const [type, setType] = useState()
    const typeChange = useCallback(e => {
        setType(e.target.value)
    }, [])
    const handleCntChange = useCallback(e => {
        setCnt(e.currentTarget.value)
    }, [])
    const dispatch = useDispatch()

    const submitSend = () => {
        if(!cnt){
            notify('请输入数量', 'error')
            return
        }
        if(!type){
            notify('请选择场景', 'error')
            return
        }
        dispatch(setCouponDistribution({
            coupon_id: id,
            issuer:'emall',
            cnt,
            need_execute_immediately: true,
            distribute_scene: type
        }, () => {
            notify('投放完成', 'success')
            callback && callback()
            hide()
        }))
    }

    return (
        <>
            <Row className="modal-line">
                <Col span={4}>
                    <span className='ft-clr-d'>投放数量:</span>
                </Col>
                <Col span={20}>
                    <Input placeholder='输入数量' maxLength={5} value={cnt} onChange={handleCntChange} />
                </Col>
            </Row>
            <Row className="modal-line">
                <Col span={4}>
                    <span className='ft-clr-d'>投放渠道:</span>
                </Col>
                <Col span={20}>
                    <Radio.Group onChange={typeChange} value={type}>
                        {DISTRIBUTE_SCENES.map(item => {
                            return (<Radio value={item.value} key={item.value}>{item.label}</Radio>)
                        })}
                    </Radio.Group>
                </Col>
            </Row>
            <CustomizeModalButton
                onOk={submitSend}
                onCancel={hide}
            />
        </>
    )
}

export default forwardRef((props, ref) => (
    <CustomizeModal title={'新增投放'} width={500} ref={ref}>
        <DistributionContent {...props} />
    </CustomizeModal>
))